<template>
  <div id="book_details">
    <div class="book_details_body">
      <div class="details_left" :style="{'background-image':`url(${bookObj.cover})`}"></div>
      <div class="details_right">
        <h1>{{bookObj.name}}</h1>
        <div class="book_info">
          {{bookObj.info}}
        </div>
        <div class="book_subject">
          <span>图书作者：{{bookObj.author}}</span>
          <span>图书出版社：{{bookObj.press}}</span>
        </div>
<!--        <div class="book_price">-->
<!--          ￥123.10 元-->
<!--        </div>-->
        <el-button class="borrows_btn" @click="addBorrow" type="primary">借阅该图书</el-button>
      </div>
    </div>
  </div>

</template>
<script>
import {getBookDetails} from "../network/bookDetails";
import {addBorrows} from "../network/homeRequest";

export default {
  name: "BookDetails",
  data(){
    return{
      bookObj:{
        bookPrice:0
      },
    }
  },
  created() {
    console.log(this.$route.params.isbn);
    getBookDetails(this.$route.params.isbn).then((result)=>{
      console.log(result);
      this.bookObj=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  },
  methods:{
    addBorrow(){
      console.log(this.bookObj.id);
      addBorrows(sessionStorage.getItem("wlj-user-id"),this.bookObj.id).then((result)=>{
        console.log(result);
        if (result.data.code===200){
          this.$message({
            message: '借阅成功!',
            type: 'success'
          });
        }else {
          this.$message.error('借阅失败');
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    }
  }

}
</script>
<style scoped>
#book_details{
  position: relative;
}
.book_details_body{
  display: flex;
  position: relative;
  width: 1100px;
  margin: 0 auto;
  top: 100px;
}
.details_left{
  width: 400px;
  height: 500px;
  background-size: 100% 100%;
}
.details_right{
  flex: 1;
  padding: 0 20px;
}
.details_right h1{
  font-size: 23px;
  line-height: 50px;
}
.book_info{
  font-size: 16px;
  line-height: 30px;
  font-weight: 100;
}
.book_subject{
  display: flex;
  border-top: 2px solid #cccccc;
  font-size: 14px;
  line-height: 50px;
  color: #C10D0C;
  justify-content: space-evenly;
}
.book_price{
  height: 70px;
  line-height: 70px;
  font-size: 30px;
  font-weight: bold;
  color: #FE0D36;
  background-image: url("../assets/image/price_bg.png");
}
.borrows_btn{
  display: block;
  margin: 20px auto;
  padding: 15px 100px;
  font-size: 20px;
}
</style>
